var username = getCookie('username')

var usercenterbtn = document.querySelector(`.wp-more`)
usercenterbtn.onclick = function () {
    location.href = "usercenter.html"
}
var usernametag = document.querySelector(`.top-nav-inner>.top-nav-tool>li:first-child`)
var logouttag = document.querySelector(`.top-nav-inner>.top-nav-tool>li:first-child+li`)
if (username) {
    console.log(usernametag, logouttag)
    usernametag.innerHTML = `
        欢迎<b>${username}来到唯品会！
    `
    logouttag.innerHTML = `
        <a href="javascript:;" onclick="logout()">退出</a>
    `
}
function logout() {
    if (confirm(`你确定要退出吗`)) {
        removeCookie(`username`)
        usernametag.innerHTML = `
        <a href="./login.html" class="login">请登录</a>
    `
        logouttag.innerHTML = `
    <a href="./register.html" class="register">注册</a>`
    }
}

$.get(`/getGoods`, res => {
    res = JSON.parse(res)
    data = res.data
    // loadHTML()
})



var data = null
var start = 0
var end = 4
var flag = true


$(`.showmore`).click(function () {
    loadHTML()
    console.log(111)
})






function loadHTML() {
    if (!flag) return false
    flag = false
    if (start >= data.length - 1) return false
    var arr = data.slice(start, end)
    var str = ''
    arr.forEach(item => {
        str += `
        <div>
             <a>
                <img src="${item.tupian}">
                 <div class="brand-name"><span class="brand-num-discount">${item.zhekou}</span><span
                            class="brand-str-discount">折起</span><span>${item.biaoti}</span></div>
             </a>
            </div>
        `
    })
    $('.showmore').before(str)
    start = end
    end += 4
    flag = true
}

var carousel = document.querySelector('.carousel');
var ul = document.querySelector('.carousel ul');
var ol = document.querySelector('.carousel ol');
var rightBtn = document.querySelector('.carousel>a.rightBtn');
var leftBtn = document.querySelector('.carousel>a.leftBtn');
// 创建ol中的li - 根据ul中此时li的个数
// 循环ul中li的个数，每循环一次，创建一个li放在ol中
for (var a = 0; a < ul.children.length; a++) {
    var li = document.createElement('li')
    ol.appendChild(li)
    // 第一个li添加红色背景
    if (a === 0) {
        li.style.backgroundColor = '#f00'
    }
}
// 给ul的前后各复制一个图片li
var firstLi = ul.children[0].cloneNode(true)
var lastLi = ul.children[ul.children.length - 1].cloneNode(true)
ul.appendChild(firstLi)
ul.insertBefore(lastLi, ul.children[0])
// 给ul设置宽度
ul.style.width = ul.children.length * firstLi.offsetWidth + 'px'
// 给ul设置left
ul.style.left = -firstLi.offsetWidth + 'px'
// 定义下标
var index = 1
// 定义开关
var onOff = true
// 给右箭头设置点击事件
rightBtn.onclick = function () {
    // 判断开关是否是开启状态
    if (!onOff) return false
    // 一旦图片开始滑动了 - 开关就应该关闭
    onOff = false
    // 下标自增
    index++
    // 设置ul滑动
    animate(ul, {
        left: -index * firstLi.offsetWidth
    }, function () {
        // 判断index的最大值
        if (index === ul.children.length - 1) {
            index = 1
            // 设置ul
            ul.style.left = -index * firstLi.offsetWidth + 'px'
        }
        // 设置小点
        for (let a = 0; a < ol.children.length; a++) {
            ol.children[a].style.backgroundColor = '#000'
        }
        ol.children[index - 1].style.backgroundColor = '#f00'
        // 打开开关
        onOff = true
    })
    // 阻止默认行为
    return false
}

leftBtn.onclick = function () {
    // 判断开关是否是开启状态
    if (!onOff) return false
    // 一旦图片开始滑动了 - 开关就应该关闭
    onOff = false
    // 下标自增
    index--
    // 设置ul滑动
    animate(ul, {
        left: -index * firstLi.offsetWidth
    }, function () {
        // 判断index的最大值
        if (index === 0) {
            index = ul.children.length - 2
            // 设置ul
            ul.style.left = -index * firstLi.offsetWidth + 'px'
        }
        // 设置小点
        for (let a = 0; a < ol.children.length; a++) {
            ol.children[a].style.backgroundColor = '#000'
        }
        ol.children[index - 1].style.backgroundColor = '#f00'
        onOff = true
    })
    // 阻止默认行为
    return false
}

for (let b = 0; b < ol.children.length; b++) {
    ol.children[b].onclick = function () {
        // 判断开关是否是开启状态
        if (!onOff) return false
        // 一旦图片开始滑动了 - 开关就应该关闭
        onOff = false
        // 下标自增
        index = b + 1
        // 设置ul滑动
        animate(ul, {
            left: -index * firstLi.offsetWidth
        }, function () {
            // 判断index的最大值
            if (index === 0) {
                index = ul.children.length - 2
                // 设置ul
                ul.style.left = -index * firstLi.offsetWidth + 'px'
            }
            // 设置小点
            for (let a = 0; a < ol.children.length; a++) {
                ol.children[a].style.backgroundColor = '#000'
            }
            ol.children[index - 1].style.backgroundColor = '#f00'
            onOff = true
        })
    }
}

var timer = setInterval(function () {
    rightBtn.onclick()
}, 1000)

carousel.onmouseover = function () {
    clearInterval(timer)
}
carousel.onmouseout = function () {
    timer = setInterval(function () {
        rightBtn.onclick()
    }, 1000)
}

function animate(ele, obj, fn = function () {}) {
    // 定义计数器 - 统计定时器个数的
    let k = 0
    for (let key in obj) {
        k++
        // 获取target
        let target = obj[key]
        // 如果是透明度
        if (key === 'opacity') {
            target *= 100
        }
        // 获取当前值
        let currentStyle = getComputedStyle(ele)[key]
        // 如果是透明度
        if (key === 'opacity') {
            currentStyle *= 100
        }
        // 取整
        currentStyle = parseInt(currentStyle)
        let timer = setInterval(function () {
            // 定义速度
            let speed = (target - currentStyle) / 20
            // 取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
            // 加大
            currentStyle += speed
            // 设置元素样式
            // 如果是透明度
            if (key === 'opacity') {
                ele.style[key] = currentStyle / 100
            } else {
                ele.style[key] = currentStyle + 'px'
            }
            // 最大值的限制
            if (currentStyle === target) {
                clearInterval(timer)
                k--
                if (k === 0) {
                    fn()
                }
            }
        }, 20)
    }
    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop
console.log(t)
        var ullis = document.querySelector(`.mian-nav`)
        if (t > 100) {
            ullis.style.position = `fixed`;
            ullis.style.top = `0px`;
            ullis.style.zIdex = `999`
            ullis.style.backgroundColor = `white`
            ullis.style.width = `100%`


        } else {
            ullis.style.position = `static`
        }

        if (t > document.body.clientHeight - 100) {
            loadHTML()
        }
        if (t > 1000) {
            $(`.ding`).css(`display`, `block`)
            $(`.ding`).click(function () {
                let s = t / 600 * 25;
                let st = setInterval(function () {
                    t -= s;
                    if (t <= 0) {
                        t = 0
                        clearInterval(st)
                    }
                    document.documentElement.scrollTop = t;



                }, 17)
            })

        } else {
            $(`.ding`).css(`display`, `none`)
        }
    }
}
